<!--  -->
<template>
  <div class="apply_contain">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="form"
    >
      <el-form-item label="商户名" prop="common_name">
        <el-input v-model="form.common_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="申请理由" prop="apply_reason" class="apply_reason"> 
        <el-input
          type="textarea"
          v-model="form.apply_reason"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传证件" prop="license_url">
        <el-button type="primary" @click="imagecropperShow = true"
          >上传</el-button
        >
        <div class="workBacground">
            <img v-if="form.license_url" :src="form.license_url" alt="公司LOGO" />
        </div>
        <image-cropper
          v-show="imagecropperShow"
          :key="imagecropperKey"
          :width="300"
          :height="300"
          url="/resources-action/user/self/edit"
          :noCircle="true"
          lang-type="zh"
          @close="close"
          @crop-upload-success="cropSuccess"
          @crop-upload-fail="cropFail"
        />
      </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ImageCropper from "@/components/ImageCropper";
import { CooperationApply } from "@/api/user"
export default {
  data(){
    var validateCommentName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入商户名"));
      } else {
        callback();
      }
    };
    var validateLicense = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上次证件"));
      } else {
        callback();
      }
    };
    var validateApplReason = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入申请理由"));
      } else if (value.length < 200) {
        callback(new Error("申请理由字数必须在200和1000之间"));
      } else if (value.length > 2000) {
        callback(new Error("申请理由字数必须在200和1000之间"));
      } else {
        callback();
      }
    };
    return{
      form:{
        common_name:"",
        apply_reason:"",
        license_url:""
      },
      rules:{
        common_name: [{ required: true, validator: validateCommentName, trigger: "blur" }],
        apply_reason: [
          { required: true, validator: validateApplReason, trigger: "blur" },
        ],
        license_url: [
          { required: true, validator: validateLicense, message: "请输入职位图片", trigger: "blur" },
        ],
      },
      imagecropperShow: false,
      imagecropperKey: 0,
    }
  },
  components:{
    ImageCropper
  },
   methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          CooperationApply(this.form)
            .then((result) => {
              this.$message.success("合作递交成功，请耐心等候,申请成功后，重新登录即可发布职位。");
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.warning("合作递交失败，请完善表单");
          return false;
        }
      });
    },
    //上传图片
    cropSuccess(resData) {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      this.form.license_url = resData;
    },
    cropFail(error) {
      console.log(error);
    },
    close() {
      this.imagecropperShow = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.apply_contain{
  width: 80%;
  .apply_reason ::v-deep .el-textarea__inner{
    min-height: 150px !important;
  }
}
</style>